import React, { useState, useEffect, memo } from 'react'
import './index.css'
import { Progress, Button, Modal, Skeleton, DatePicker } from 'antd'
import MyProgress from '../MyProgress'
import Guests from '../Guests'
import moment from 'moment'
import SingleHotelRoom from '../SingleHotelRoom'

function HotelRoomList({ hotelroom, time }) {
  //const [visible, setVisible] = useState([])
  const [loading, setLoading] = useState(true)
  //const [selectDate, setSelectDate] = useState([])

  useEffect(() => {
    setLoading(true)
    /* const selectDate = hotelroom.roomlist.map((room) => {
      return { roomname: room.roomname, date: moment(time[1]).format('YYYY-MM-DD') }
    })
    setSelectDate(selectDate) */
  }, [time])

  useEffect(() => {
    setLoading(false)
  }, [hotelroom])

  /* useEffect(() => {
    let visableTemp = visible
    for (let i = 0; i < hotelroom.roomlist.length; ++i) {
      visableTemp.push(false)
    }
    setVisible([...visableTemp])    
  }, [])

  const computTime = (time) => {
    if (time === '全无效') {
      return '--'
    }
    // 当前时间的时间戳
    var nowTime = Date.parse(new Date())
    // 指定时间的时间戳
    var endTime = Date.parse(new Date(time))
    // 计算相差天数
    var timeResult = nowTime - endTime
    var days = Math.floor(timeResult / (24 * 3600 * 1000))
    // 计算出小时数
    var dayMS = timeResult % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数
    var hours = Math.floor(dayMS / (3600 * 1000))
    // 计算相差分钟数
    var hoursMS = dayMS % (3600 * 1000) // 计算小时数后剩余的毫秒数
    var minutes = Math.floor(hoursMS / (60 * 1000))
    return days + "天" + hours + "小时" + minutes + "分"


  }

  const showModal = (index) => {
    let visableTemp = visible
    visableTemp[index] = !visableTemp[index]
    setVisible([...visableTemp])
  }

  const disabledDate = (current) => {
    return current <= moment(time[0]) || current >= moment(time[1])
  } */

  return (
    <>
      <div className="flex-container">
        <div className="left-container">
          <div className="left-container-content">
            <div>{hotelroom.hotelname}</div>
            {/* <div style={
              { fontSize: '15px' }
            }>(共有{hotelroom.roomnumber}间房)</div> */}
          </div>
        </div>
        <div className="right-container">
          <div className="flex-right-container">
            {hotelroom.roomlist.length
              ? hotelroom.roomlist.map((room, index) => (
                  <div key={room.roomname} style={{ position: 'relative' }}>
                    <Skeleton loading={loading} active>
                      <SingleHotelRoom
                        room={room}
                        time={time}></SingleHotelRoom>
                      {/*  <div >
                    <span style={{ fontSize: '1.5em', margin: '1em' }}>{room.roomname}</span>
                    <span>{room.rest_netId}</span>
                  </div>
                  <div style={{ position: 'absolute', top: '10px', right: '10px' }}>
                    <Progress type="circle" strokeColor={{
                      '0%': '#108ee9',
                      '100%': '#87d068',
                    }} percent={((1 - room.invalidProportion) * 100).toFixed(2)} width={50} />

                  </div>


                  <div style={{ display: 'flex', margin: '1em' }}>
                    <div className={(Date.parse(new Date()) - Date.parse(new Date(room.lastValidTime))) <= 1200000 ? "circle-green" : "circle-red"}></div>

                    <div>{computTime(room.lastValidTime)}</div>
                  </div>
                  <div style={{ margin: '1em' }}>
                    <div >
                      <DatePicker
                        size='small'
                        disabledDate={disabledDate}
                        onChange={(date, dateString) => {
                          console.log(date, dateString)
                          const newSelectDate = selectDate.map((Date) => {
                            if (Date.roomname === room.roomname) {
                              Date.date = dateString
                            }
                            return Date
                          })
                          setSelectDate(newSelectDate,)
                        }}
                      />
                    </div>
                    <div style={{ paddingTop: '1em' }}>
                      <MyProgress data={room.invalidTime.filter((item) => {
                        if (selectDate && selectDate.length > 0) {
                          console.log(selectDate)

                          const filterTime = selectDate.filter((Date) => {
                            return Date.roomname === room.roomname
                          })
                          console.log(filterTime[0].date)
                          console.log(moment(item.time).format('YYYY-MM-DD'))
                          return moment(item.time).format('YYYY-MM-DD') === filterTime[0].date
                        } else {
                          return []

                        }


                      })} />
                    </div>
                  </div>


                  <div style={{ position: 'absolute', bottom: '10px', right: '10px' }}>
                    <Button type="default" onClick={() => showModal(index)}>
                      ...detail
                    </Button>
                  </div>
                  <Modal
                    title="插卡取电"
                    centered
                    visible={visible[index]}
                    onOk={() => showModal(index)}
                    onCancel={() => showModal(index)}
                    width={1000}

                  >
                    <div >
                     
                      <Guests registerId={room.registerId} time={time} />
                    </div>
                  </Modal> */}
                    </Skeleton>
                  </div>
                ))
              : ''}
          </div>
        </div>
      </div>
    </>
  )
}

export default memo(HotelRoomList)
